import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { Box, Button, Dialog, DialogContent, DialogTitle, Typography } from '@mui/material';
import create from 'zustand';

import Disbursement from '../../../../api/disbursement/disbursement';
import { useStyles } from '../UIs/styled-mui-dialog';

type successStore = {
    open: boolean;
    disbursement: Disbursement;
    close?: () => void;
};

const useSuccessStore = create<successStore>((set) => ({
    open: false,
    disbursement: null,
    close: () => set({ open: false })
}));

export const successDisbursementDialog = ({ open, disbursement }: successStore) => {
    useSuccessStore.setState({
        open,
        disbursement
    });
};

export const SuccessDisbursementDialog = () => {
    const style = useStyles();
    const { open, disbursement } = useSuccessStore();
    return (
        <Dialog open={open} maxWidth="sm" fullWidth disableEscapeKeyDown={true}>
            <div className={style.dialogBackground}>
                <Box className={style.center}>
                    <DialogTitle className={style.textTitle}>Payment Accepted!</DialogTitle>
                </Box>
                <DialogContent className={style.dialogContent}>
                    <Box display="flex" alignItems="center" justifyContent="center" sx={{ p: 1 }}>
                        <CheckCircleIcon sx={{ height: '64px', width: '64px' }} />
                    </Box>
                    <Typography>
                        Thank you for disbursing with us! Your transaction hash has been received
                        and is now being verified.
                    </Typography>

                    <Typography className={'top-20'}>
                        You will receive an email once the disbursement is done processing.
                    </Typography>

                    <Button
                        className={`${style.button} top-40`}
                        variant="contained"
                        href="/"
                        fullWidth
                    >
                        Go to Home
                    </Button>
                    <Button
                        className={`${style.button} top-20`}
                        variant="contained"
                        href={'/transactions/' + (disbursement ? disbursement.id : '')}
                        fullWidth
                    >
                        Visit Transactions
                    </Button>
                </DialogContent>
            </div>
        </Dialog>
    );
};
